<template>
	<view>
		<view class="order-box">
			<view class="order-box-message" v-for="(message,index) in messageList" :key="index">
				<view class="order-box-message-text">
					<view class="layout">
						
							<view class="order-box-message-text-title">{{message.title}}</view>
							<view class="order-box-message-text-time">{{message.sendTime}}</view>
					</view>
				</view>
				<view class="order-box-message-note">
					<view class="layout">
						<view class="order-box-message-note-icon">
							<image src="/static/logo.png"></image>
							<view class="order-box-message-note-icon-volume">共12件</view>
						</view>
						<view class="order-box-message-note-text">您的酒小儿。就睡外卖（重庆茶园店）订单已送达</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-button">
			<view class="layout">
				<view class="order-button-item">订单</view>
				<view class="order-button-item">查看</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList:[
					{
						"title":"商品已送达",
						"sendTime":"2024-08-22 10:25:25"
					},
					{
						"title":"骑手已成功取到商品",
						"sendTime":"2024-08-22 10:25:25"
					},
					{
						"title":"退款状态提醒",
						"sendTime":"2024-08-22 10:25:25"
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
page { background: #ededed; }

.order-box { width: 700rpx; margin: 0 auto; padding-top: 25rpx;  }
.order-box-message { background: #fff; border-radius: 10rpx; padding: 25rpx; margin-bottom: 25rpx; }
.order-box-message-text { padding:25rpx 0; height:30rpx; line-height:50rpx; overflow:hidden; }
.order-box-message-text-title { width: 500rpx; font-size:18px; text-align: left;}
.order-box-message-text-time { width: 200rpx; text-align: right; color:#666;}
.order-box-message-note { background:#ededed; border-radius: 15rpx; }
.order-box-message-note-icon { width: 150rpx; height: 150rpx; position: relative; }
.order-box-message-note-icon-volume { background:#000; color:#fff; font-size:12px; text-align:center; }
.order-box-message-note-icon-volume { min-width:50rpx; border-radius:15rpx; padding:10rpx 15rpx; }
.order-box-message-note-icon-volume { position:absolute; left:20rpx; bottom:20rpx; }
.order-box-message-note-text { width: 520rpx; height: 120rpx; color:#666; line-height:25px; padding:15rpx; }

.order-button { position: fixed; left: 0; right: 0; bottom: 0;}
.order-button { background: #fff; height: 100rpx; }
.order-button-item { padding: 25rpx; text-align: center; width: 300rpx; }
.order-button-item { border-right: #ededed 1px solid;}
.order-button-item:last-child { border-right: 0; }
</style>
